// 使用 Canvas 生成占位图片
export const generatePlaceholder = (width, height, text) => {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  // 设置背景色
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, width, height);

  // 设置文字
  ctx.fillStyle = '#666666';
  ctx.font = '20px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text || `${width}x${height}`, width / 2, height / 2);

  return canvas.toDataURL('image/jpeg');
};

// 生成所有需要的占位图片
export const generateAllPlaceholders = () => {
  const placeholders = {
    // 默认图片
    default: generatePlaceholder(800, 600, '默认图片'),
    'default-avatar': generatePlaceholder(200, 200, '默认头像'),

    // 轮播图
    'banner-1': generatePlaceholder(1920, 600, '轮播图 1'),
    'banner-2': generatePlaceholder(1920, 600, '轮播图 2'),
    'banner-3': generatePlaceholder(1920, 600, '轮播图 3'),

    // 新闻图片
    'news-1': generatePlaceholder(800, 600, '新闻图片 1'),
    'news-2': generatePlaceholder(800, 600, '新闻图片 2'),

    // 登录页装饰图
    'decoration-1': generatePlaceholder(1920, 1080, '登录装饰 1'),
    'decoration-2': generatePlaceholder(1920, 1080, '登录装饰 2'),
    'decoration-3': generatePlaceholder(1920, 1080, '登录装饰 3'),

    // 非遗详情图
    'heritage-1-detail-1': generatePlaceholder(1200, 800, '非遗详情 1-1'),
    'heritage-1-detail-2': generatePlaceholder(1200, 800, '非遗详情 1-2'),
    'heritage-1-detail-3': generatePlaceholder(1200, 800, '非遗详情 1-3'),
    'heritage-2-detail-1': generatePlaceholder(1200, 800, '非遗详情 2-1'),
    'heritage-2-detail-2': generatePlaceholder(1200, 800, '非遗详情 2-2'),
    'heritage-2-detail-3': generatePlaceholder(1200, 800, '非遗详情 2-3'),
    'heritage-3-detail-1': generatePlaceholder(1200, 800, '非遗详情 3-1'),
    'heritage-3-detail-2': generatePlaceholder(1200, 800, '非遗详情 3-2'),
    'heritage-3-detail-3': generatePlaceholder(1200, 800, '非遗详情 3-3')
  };

  return placeholders;
}; 